// 断点列表
$breakpoints: (
	'phone': (320px, 480px), // 手机
	'pad': (481px, 768px), // 平板
	'notebook': (769px, 1024px), // 笔记本
	'desktop': (1025px, 1200px), // 桌面；台式机
	'tv': 1201px, // 大屏
);

// 混合
@mixin respond-to($breakname) {
	
	$bp: map-get($breakpoints, $breakname);
		
	@if type-of($bp) == 'list' {
		$min: nth($bp, 1);
		$max: nth($bp, 2);
		@media (min-width: $min) and (max-width: $max) {
			@content;
		}
	}
	
	@else {
		 @media (min-width: $bp) {
		 	@content;
		 }
	}
}
	
.case-class-name {
	@include respond-to('phone') {
		height: 50px;
	};
	
	@include respond-to('pad') {
		height: 60px;
	};
	
	@include respond-to('notebook') {
		height: 70px;
	};
	
	@include respond-to('desktop') {
		height: 80px;
	};
	
	@include respond-to('tv') {
		height: 90px;
	};
}